/**
 * html2canvas 内嵌 iframe 渲染目标元素会导致外部样式丢失需重新赋值
 *
 * @export 复写生成图片样式
 * @class OverwritePrintStyle
 */
export class OverwritePrintStyle {
    constructor(element, primaryColor) {
        this.element = element;
        this.primaryColor = primaryColor;
    }

    /**
     * 图表基础样式
     *
     * @memberof OverwritePrintStyle
     */
    overwriteBaseStyle() {
        const nodeLineElements = this.element.querySelectorAll('.linkBase');
        const nodeShapeElements = this.element.querySelectorAll('.nodeBase > rect');
        const nodeLeafShapeElements = this.element.querySelectorAll('.leafNodeBase > rect');

        nodeLineElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.fill = 'none';
            tempElem.style.stroke = this.primaryColor;
        });

        nodeShapeElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.fill = this.primaryColor;
            tempElem.style.stroke = this.primaryColor;
        });

        nodeLeafShapeElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.fill = 'white';
            tempElem.style.stroke = this.primaryColor;
            tempElem.style.display = 'none';
        });
    }

    fetchImages() {
        const avatarElements = this.element.querySelectorAll('[class*="_nodeTemplate_"] img');
        const promises = [];
        avatarElements.forEach((elem) => {
            const tempElem = elem;
            const href = tempElem.src;

            if (href.startsWith('base64')) {
                return;
            }

            const promise = new Promise((resolve, reject) => {
                const img = new Image();
                img.setAttribute('crossOrigin', 'anonymous');
                img.src = `${href}?time=${new Date().valueOf()}`;
                img.onload = () => {
                    const { width, height } = tempElem.getBoundingClientRect();
                    const canvas = document.createElement('canvas');
                    canvas.width = width;
                    canvas.height = height;
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0, tempElem.style.width, tempElem.style.height);
                    const base64 = canvas.toDataURL('image/jpeg');
                    tempElem.src = base64;
                    resolve();
                };
                img.onerror = reject;
            });
            promises.push(promise);
        });
        return Promise.all(promises);
    }

    /**
     * 节点头部模块样式
     *
     * @memberof OverwritePrintStyle
     */
    overwriteNodeHeaderStyle() {
        const nodeHeaderElements = this.element.querySelectorAll('[class*="_nodeHeader_"]');
        const nodeHeaderSpanElements = this.element.querySelectorAll('[class*="_nodeHeader_"] > span');
        const nodeHeaderTeamWrapperElements = this.element.querySelectorAll('[class*="_teamWrapper_"]');

        nodeHeaderElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.display = 'flex';
            tempElem.style.alignItems = 'stretch';
            tempElem.style.backgroundColor = this.primaryColor;
            tempElem.style.color = 'white';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeHeaderSpanElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.fontWeight = '600';
            tempElem.style.fontSize = '14px';
            tempElem.style.lineHeight = '35px';
            tempElem.style.flex = '1 1';
            tempElem.style.textAlign = 'left';
            tempElem.style.overflow = 'hidden';
            tempElem.style.textOverflow = 'ellipsis';
            tempElem.style.whiteSpace = 'nowrap';
            tempElem.style.paddingRight = '10px';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeHeaderTeamWrapperElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.display = 'flex';
            tempElem.style.alignItems = 'center';
            tempElem.style.paddingRight = '5px';
            tempElem.style.fontSize = '12px';
            tempElem.style.boxSizing = 'border-box';
        });
    }

    /**
     * 节点内容模块样式
     *
     * @memberof OverwritePrintStyle
     */
    overwriteNodeBodyStyle() {
        const nodeBodyElements = this.element.querySelectorAll('[class*="_nodeBody_"]');
        const nodeManagerWrapperElements = this.element.querySelectorAll('[class*="_nodeManagerWrapper_"]');
        const nodeManagerInfoWrapper = this.element.querySelectorAll('[class*="_managerInfoWrapper_"]');
        const nodeManagerInfoDiv = this.element.querySelectorAll('[class*="_managerInfoWrapper_"] > div');
        const nodeManagerInfoItem = this.element.querySelectorAll('[class*="_managerInfoItem_"]');
        const nodeManagerInfoAvatar = this.element.querySelectorAll('[class*="_managerInfoItem_"] .ant-avatar');
        const nodeManagerInfoName = this.element.querySelectorAll('[class*="_managerInfoName_"]');
        const nodeManagerInfoNameP = this.element.querySelectorAll('[class*="_managerInfoName_"] > p');
        const nodeManagerInfoNameSpan = this.element.querySelectorAll('[class*="_managerInfoName_"] > span');

        const nodeEmployeeWrapper = this.element.querySelectorAll('[class*="_nodeEmployeeWrapper_"]');
        const nodeEmployeeList = this.element.querySelectorAll('[class*="_nodeEmployeeList_"]');
        const nodeEmployee = this.element.querySelectorAll('[class*="_nodeEmployee_"]');
        const nodeEmployeeItem = this.element.querySelectorAll('[class*="_nodeEmployeeItem_"]');

        nodeBodyElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.borderTop = '1px solid #efefef';
            tempElem.style.display = 'flex';
            tempElem.style.flexDirection = 'column';
            tempElem.style.flex = '1 1';
            tempElem.style.boxSizing = 'border-box';
        });
        // #region 部门管理员
        nodeManagerWrapperElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.display = 'flex';
            tempElem.style.alignItems = 'center';
            tempElem.style.padding = '5px 8px';
            tempElem.style.flex = '1 1';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeManagerInfoWrapper.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.textAlign = 'left';
            tempElem.style.display = 'flex';
            tempElem.style.alignItems = 'center';
            tempElem.style.width = '100%';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeManagerInfoDiv.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.flex = '1 1';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeManagerInfoItem.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.display = 'flex';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeManagerInfoName.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.marginLeft = '5px';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeManagerInfoNameP.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.marginBottom = '0px';
            tempElem.style.fontSize = '14px';
            tempElem.style.fontWeight = '600';
            tempElem.style.overflow = 'hidden';
            tempElem.style.whiteSpace = 'nowrap';
            tempElem.style.textOverflow = 'ellipsis';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeManagerInfoNameSpan.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.fontSize = '12px';
            tempElem.style.display = 'block';
            tempElem.style.overflow = 'hidden';
            tempElem.style.whiteSpace = 'nowrap';
            tempElem.style.textOverflow = 'ellipsis';
            tempElem.style.boxSizing = 'border-box';
            tempElem.style.lineHeight = '1.5';
        });

        nodeManagerInfoAvatar.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.margin = '0';
            tempElem.style.padding = '0';
            tempElem.style.fontVariant = 'tabular-nums';
            tempElem.style.listStyle = 'none';
            tempElem.style.fontFeatureSettings = 'tnum';
            tempElem.style.position = 'relative';
            tempElem.style.overflow = 'hidden';
            tempElem.style.color = '#fff';
            tempElem.style.whiteSpace = 'nowrap';
            tempElem.style.textAlign = 'center';
            tempElem.style.verticalAlign = 'middle';
            tempElem.style.width = '40px';
            tempElem.style.height = '40px';
            tempElem.style.lineHeight = '40px';
            tempElem.style.borderRadius = '50%';
            tempElem.style.display = 'block';
            tempElem.style.objectFit = 'cover';
            tempElem.style.boxSizing = 'border-box';
        });
        // #endregion

        nodeEmployeeWrapper.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.display = 'flex';
            tempElem.style.alignItems = 'center';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeEmployeeList.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.orderTop = '1px solid #efefef';
            tempElem.style.padding = '5px 8px';
            tempElem.style.display = 'flex';
            tempElem.style.width = '100%';
            tempElem.style.alignItems = 'center';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeEmployee.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.display = 'flex';
            tempElem.style.flex = '1 1';
            tempElem.style.boxSizing = 'border-box';
        });

        nodeEmployeeItem.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.marginRight = '5px';
            tempElem.style.boxSizing = 'border-box';
        });
    }

    /**
     * 节点模板样式
     * @memberof OverwritePrintStyle
     */
    async overwriteNodeTemplateStyle() {
        const ortChartElement = this.element.querySelector('[class*=_orgChartWrapper_]');
        const orgChart = this.element.querySelector('.rd3t-tree-container > svg > g');
        const { width, height } = orgChart.getBoundingClientRect();
        ortChartElement.style.width = orgChart.getBoundingClientRect();
        ortChartElement.style.height = width;
        ortChartElement.style.boxSizing = height;

        const nodeTemplateElements = this.element.querySelectorAll('[class*="_nodeTemplate_"]');
        nodeTemplateElements.forEach((elem) => {
            const tempElem = elem;
            tempElem.style.border = '1px solid #ffa22d';
            tempElem.style.backgroundColor = 'white';
            tempElem.style.borderRadius = '5px';
            tempElem.style.width = '250px';
            tempElem.style.height = '120px';
            tempElem.style.display = 'flex';
            tempElem.style.flexDirection = 'column';
            tempElem.style.boxSizing = 'border-box';
        });

        this.overwriteNodeHeaderStyle();
        this.overwriteNodeBodyStyle();

        try {
            await this.fetchImages();
        } catch (error) {
            console.log('error', error);
        }
    }
}
